<template>
	<div class="app-container bgco">
		<div class="filter-container">
			<el-form :model="print" :rules="rules" ref="print" size="mini">
				<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom:10px;">
					<el-tab-pane label="云打印机配置" name="first">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="用户名:" label-width="160px" prop="user">
									<el-input v-model="print.user"></el-input>
								</el-form-item>
								<el-form-item label="UKEY:" label-width="160px" prop="key">
									<el-input v-model="print.key"></el-input>
								</el-form-item>
								<el-form-item label="打印机编号:" label-width="160px" prop="sn">
									<el-input v-model="print.sn"></el-input>
								</el-form-item>
                </el-form-item>
                <el-form-item label="是否开启:" label-width="160px" prop="isOpen">
                  <template>
                    <el-radio v-model="print.isOpen" label="true">是</el-radio>
                    <el-radio v-model="print.isOpen" label="false">否</el-radio>
                  </template>
                </el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="打印模板" name="second">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="14">
								<el-form-item label="" prop="tpl">
									 <el-input type="textarea" v-model="print.tpl" class="printtempalte"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
				<el-form-item label-width="160px" class="containbtn">
					<el-button class="subbtn" type="primary" icon="el-icon-success" size="medium" @click="sub('print')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import waves from '@/directive/waves' // Waves directive
	import {seeprint,saveprint} from '@/api/admin/configure' //调用模块接口
	export default {
		name: 'advertising',
		components: {},
		directives: {
			waves
		},
		data() {
		  let _user = (rule, value, callback) => {
        if (this.activeName == 'first') {
          if (this.print.user == '') {
            return callback(new Error("请填写用户名"));
          }
        }
        return callback();
      };
      let _printKey = (rule, value, callback) => {
        if (this.activeName == 'first') {
          if (this.print.key == '') {
            return callback(new Error("请填写UKEY"));
          }
        }
        return callback();
      };
      let _sn = (rule, value, callback) => {
        if (this.activeName == 'first') {
          if (this.print.sn == '') {
            return callback(new Error("请填写打印机编号"));
          }
        }
        return callback();
      };
      let _tpl = (rule, value, callback) => {
        if (this.activeName == 'second') {
          if (this.print.tpl == '') {
            return callback(new Error("请填写打印机模板"));
          }
        }
        return callback();
      };
			return {
				activeName: 'first',
				options: [{
				  value: true,
				  label: '是'
				}, {
				  value: false,
				  label: '否'
				}],
				value:true,
				print:{
          key:"",
          sn:"",
          tpl:"",
          user:"",
          isOpen: 'false',
        },
        rules: {
          user: [
            {validator: _user, required: true, trigger: 'blur'}
          ],
          key: [
            {validator: _printKey, required: true, trigger: 'blur'}
          ],
          sn: [
            {validator: _sn, required: true, trigger: 'blur'}
          ],
          tpl: [
            {validator: _tpl, required: true, trigger: 'blur'}
          ]
        }
			}
		},
		methods: {
			handleClick(tab, event) {
			},
			sub(formName){
				this.$refs[formName].validate((valid) => {
					  if (valid) {//通过验证规则
						saveprint({
							"user": this.print.user,
							"key": this.print.key,
							"sn": this.print.sn,
							"tpl": this.print.tpl,
              "isOpen": this.print.isOpen,
						}).then(res=>{
							if(res.respCode=='0000'){
								this.$alert('提交成功', {
								  confirmButtonText: '确定',
								  type:'success'
								});
							}
						})
					  } else {//没有通过验证规则
							this.$alert('提交失败,请将内容填写完整', {
								confirmButtonText: '确定',
								type:'warning '
							});
						return false;
					  }
				});
			}
		},
		created() {
			
		},
		mounted(){
			seeprint({
				
			}).then(res=>{
				console.log(res.data.config);
				if(res.success){
          this.print.key = res.data.config.key;
          this.print.sn = res.data.config.sn;
          this.print.tpl = res.data.config.tpl;
          this.print.user = res.data.config.user;
          this.print.isOpen = res.data.config.isOpen+'' || 'false';
				}
			})
		}
	}
</script>
	
<style scoped="scoped">
	.filter-container{
		background:#fff;
		padding:20px 20px;
		position:relative;
	}
	.mgbt{
		margin-bottom:20px;
	}
	.cloudtit{
		font-size: 18px;
	}
	.inwd{
		width:100%;
	}
	.el-button--medium{
		width:180px;
		height:40px;
	}
	
</style>
